<template>
  <div>
    <el-upload
        name="headPic"
        class="upload-demo"
        ref="uploadFile"
        :action="actionUrl"
        :before-upload="beforeFileUpload"
        :auto-upload="false"
        :on-success='onSuccess'
        :on-error="onError">
      <el-button size="small" type="primary">选择文件</el-button>
    </el-upload>
    <el-button type="primary" @click="submitUpload">确认上传</el-button>
  </div>
  <div>

    <el-row>
      <el-table :data="goodsList" stripe>
        <el-table-column prop="oldName" label="文件名"></el-table-column>

        <el-table-column >
          <template #default="scope">
            <el-button type="primary" @click="see(scope.row.newName)">预览</el-button>
          </template>
        </el-table-column>
        <el-table-column label="移除">
          <template #default="scope">
            <el-button type="primary" >删除商品</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-row>
  </div>


</template>
<script>

import axios from "axios";

export default {
  data() {
    return {
      actionUrl: '/api/file/files', // 上传地址
      goodsList:[]
    }
  },created() {
    this.query()
  },

  methods: {
    query(){
      axios.post("/api/file/queryFiles",null).then(res=>{
        this.goodsList=res.data;
        console.log(this.goodsList)
      })
    },
    see(name){

      var url = 'http://1.14.102.247:7001/faces/'+name; //要预览文件的访问地址


      let param=new URLSearchParams();
      param.append("url",url);
      axios.post("/api/file/setCode",param).then(res=>{
        window.open('http://1.14.102.247:8012/onlinePreview?url='+res.data);
      })
    },
//确认上传
    submitUpload() {
      this.$refs.uploadFile.submit();
    },
//文件上传之前

//文件上传成功
    onSuccess() {
      this.$message.success("文件上传成功");
    },
//上传失败
    onError() {
      this.$refs.upload.clearFiles();
      this.$message.error("文件上传失败")
    }
  }
}
</script>